<template>
	<!-- 存货分类维护 -->
	<div>
		<v-container row class="text-subtitle-1 d-flex justify-center  align-left">
			<v-btn class="ml-2 mt-7" small tile color="primary"
				@click="tempModel={},inventoryClassModel={},editInventoryDialog=true,addOrUpdate=true,isDisableSelectInvClassBtn=true">
				添加顶级分类
			</v-btn>
			<v-divider class="mx-4" inset vertical></v-divider>
			<v-row class="mt-2">
				<v-col cols="12" sm="3" md="6">
					<v-text-field label="存货分类名称" v-model="inventoryClassQuery.name" dense outlined>
					</v-text-field>
				</v-col>

				<!-- ml-n16 前面加n是间距 -->
				<!-- class="ml-n16 mx-auto" -->
				<v-col cols="12" sm="2" md="2">
					<v-btn depressed color="primary" @click="loadPages">查询</v-btn>
					<v-btn class="ml-3" depressed color="primary" @click="refreshLoadPages">
						刷新</v-btn>
				</v-col>
			</v-row>
		</v-container>
		<br />
		<v-card>
			<v-card-text>
				<v-treeview item-disabled="locked" v-model="selectInvClassItems" :items="treeItems" item-key="id"
					return-object activatable open-on-click dense>
					<template v-slot:prepend="{ item, open }">
						<v-tooltip top> 
							<template v-slot:activator="{ on, attrs }">
								<v-icon v-bind="attrs"
          v-on="on" class="ml-2" small tile color="primary" @click="currentPageOpenDialog(item)">
									mdi-plus-thick
								</v-icon>
							</template>
							<span>添加下级节点</span>
						</v-tooltip>

					</template>
				</v-treeview>
			</v-card-text>
		</v-card>

		<v-dialog v-model="editInventoryDialog" width="600">
			<v-card>
				<v-card-title>添加存货分类</v-card-title>
				<v-card-text>
					<v-row>
						<v-col cols="12" md="8">
							<v-text-field v-model="this.tempModel.name" label="上级存货分类信息" outlined disabled dense>
							</v-text-field>
						</v-col>
						<v-col cols="12" md="4">
							<v-btn small tile class="mt-1" color="primary" :disabled="isDisableSelectInvClassBtn"
								@click="openInvClassCommentClick">选择上次存货分类
							</v-btn>
						</v-col>
					</v-row>

					<v-text-field v-model="inventoryClassModel.cinvcname" label="当前存货分类名称" outlined dense>
					</v-text-field>
					<!-- 	<v-text-field disabled :style="this.tempModel.value" v-model="inventoryClassModel.cinvccode"
						:disabled="!addOrUpdate" label="存货分类代码" outlined> -->
					<!-- 	<v-text-field :style="this.tempModel.iinvcgrade" label="存货分类编码级次(属于几级节点)(必填)"
						v-model="inventoryClassModel.iinvcgrade" dense outlined>
					</v-text-field>
					<v-checkbox disabled label="是否是末级分类(必填)" v-model="inventoryClassModel.binvcend" dense outlined>
					</v-checkbox>
 -->
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="success" class="mr-4" text @click="editInventorySubmit">确认</v-btn>
					<v-btn color="warning" class="mr-4" text @click="close">取消</v-btn>
				</v-card-actions>
			</v-card>
		</v-dialog>
		<invclasstreecomment :invClassTreeModel="invClassTreeModel" :callBack="setInvClassCallBack">
		</invclasstreecomment>
	</div>
</template>

<script>
	// import {
	// 	mdiPlusThick
	// } from '@mdi/js';
	import invclassselect from '../components/InvclassSelect.vue'
	import invClassTreeComment from '../components/InvClassTree.vue'
	export default {
		name: 'miantain_type',
		components: {
			invclassselect,
			invclasstreecomment: invClassTreeComment
		},
		data: () => ({

			inventoryClassSelectModel: {
				loadInventoryClassUrl: `PDM/PDMMaintainType/loadInventoryClass?hiddenEndNode=true`,
				isReturnObj: true
			},
			inventoryClassQuery: {
				code: '',
				name: '',
				sort_code: '',

			},
			treeItems: [],
			selectInvClassItems: [],
			selectInvClass: {},
			editInventoryDialog: false,
			inventoryClassModel: {},
			tempModel: {},
			unitItems: [],
			inventoryClassItems: [],
			//true:add  false:update
			addOrUpdate: true,
			invClassTreeModel: {
				dialog: false,
				getTreeUrl: `PDM/PDMMaintainType/GetInvclassTree`,
				label: '选择上级存货分类'
			},
			isDisableSelectInvClassBtn: false,
		}),

		created() {
			this.getProjectHeaderList()
			this.loadPages()
		},
		methods: {
			openInvClassCommentClick() {
				this.isDisableSelectInvClassBtn = false
				this.invClassTreeModel.dialog = true
				console.log(this.isDisableSelectInvClassBtn)
				if(!this.isDisableSelectInvClassBtn)
				this.invClassTreeModel.getTreeUrl = `PDM/PDMMaintainType/GetInvclassTree?iinvcgrade=`
				else
				this.invClassTreeModel.getTreeUrl = `PDM/PDMMaintainType/GetInvclassTree?iinvcgrade=1`
			},
			setInvClassCallBack(invClass) {
				this.tempModel = invClass
				this.inventoryClassModel.parentid = invClass.id
			},
			currentPageOpenDialog(invClass) {
				this.isDisableSelectInvClassBtn = false
				this.editInventoryDialog = true
				// this.invClassTreeModel.getTreeUrl = `PDM/PDMMaintainType/GetInvclassTree?iinvcgrade=null`
				this.setInvClassCallBack(invClass)
			},
			async loadPages() {
				var response = await this.$httpRequest({
					url: `PDM/PDMMaintainType/GetInvclassTree?name=${this.inventoryClassQuery.name}`,
					method: 'get'
				})
				if (response.status == 1) {
					this.treeItems = response.data
				} else {
					this.$message.error(response.info)
				}
			},
			async refreshLoadPages() {
				this.inventoryClassQuery.code = ''
				this.inventoryClassQuery.name = ''

				await this.loadPages()
			},

			async editInventorySubmit() {
				var url = ''

				if (this.addOrUpdate) {
					url = 'PDM/PDMMaintainType/Add'
				} else {
					url = 'PDM/PDMMaintainType/UpdateInventoryClass'
				}

				var response = await this.$httpRequest({
					url: url,
					method: 'post',
					data: this.inventoryClassModel
				})
				if (response.status == 1) {
					await this.loadPages()
					this.$message.success(response.info)
					this.close()
				} else {
					this.$message.error(response.info)
				}
			},
			inventoryClassSelectCallBack(item) {
				this.tempModel = item
				this.inventoryClassModel.cinvccode = item.value
				// this.inventoryClassModel.iinvcgrade = parseInt(item.iinvcgrade) + 1
				// this.inventoryClassModel.binvcend = (this.inventoryClassModel.iinvcgrade == 4 ? 1 : 0)

			},
			close() {
				this.inventoryClassModel = {}
				this.editInventoryDialog = false
			},
			getProjectHeaderList() {
				this.inventoryHeaderList = [{
						text: '存货分类编码',
						align: 'center',
						value: 'cinvccode',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '存货分类名称',
						align: 'center',
						value: 'cinvcname',
						filterable: false,
						class: 'fixed'
					}
				]
			},
		}
	}
</script>
